<template>
  <el-form :model="form" label-width="120px" class="form">
    <el-form-item label="歌曲名">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="歌手名">
      <el-input v-model="form.singer" />
    </el-form-item>
    <el-form-item label="专辑名">
      <el-input v-model="form.introduction" />
    </el-form-item>
    <el-form-item label="歌词">
      <el-input v-model="form.lyric" type="textarea" />
    </el-form-item>
    <el-form-item label="上传歌曲">
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        action="http://localhost:8888/song/add"
        :auto-upload="false"
        :data="params"
        :on-success="handleSuccess"
      >
        <template #trigger>
          <el-button type="primary">选择歌曲</el-button>
        </template>
        <el-button class="ml-3" type="success" @click="submitUpload">
          上传歌曲
        </el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  getCurrentInstance,
  reactive,
  defineEmits,
  computed,
} from "vue";
import LuoForumBar from "@/views/forum/LuoForumBar.vue";
import { Search } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import { HttpManager } from "@/api";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const form = reactive({
      name: "",
      singer: "",
      introduction: "",
      lyric: "",
    });
    const params = {
      singerId: "0",
      name: "",
      introduction: "",
      lyric: "",
      picPath: store.getters.userPic,
    };
    const uploadRef = ref();
    const userPic = computed(() => store.getters.userPic);

    async function handleSuccess(res) {
      if (res.type != "success")
        (proxy as any).$message({
          message: "上传失败",
          type: "success",
        });
      (proxy as any).$message({
        message: res.message,
        type: res.type,
      });

      if (res.success) {
        (form.name = ""),
          (form.introduction = ""),
          (form.singer = ""),
          (form.lyric = "");
        // proxy.$emit("upload-list");
      }
    }

    async function submitUpload() {
      (params.singerId = "0"),
        (params.name = `${form.singer}-${form.name}`),
        (params.introduction = form.introduction),
        (params.lyric = form.lyric);
      uploadRef.value.submit();
    }

    return {
      params,
      form,
      uploadRef,
      handleSuccess,
      submitUpload,
    };
  },
});
</script>

<style scoped>
.form {
  padding: 40px;
  width: 500px;
  height: 400px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20vh;
  border-radius: 10px;
}
</style>
